<template>
  <div class="dynamicContainer">
    <div class="topCont">
      <!-- 头部 -->
      <van-nav-bar
        title="建造动态"
        right-text="按钮"
        @click-right="onClickRight"
        class="navheadrt"
      >
        <div class="nav_right f fc" slot="right">
          <img src="./imgs/2.png" alt />
        </div>
      </van-nav-bar>
      <!-- 姓名 -->
      <div class="f topNmae vfe">
        <img src="./imgs/1.png" alt />
        <span class="zw">{{ loginUserInfo.cRoleName }}</span>
        <span class="name">{{ loginUserInfo.cName }}</span>
      </div>
    </div>
    <!-- 动态 -->
    <div class="middleCont f fb">
      <div class="middleCont_left">
        <p class="top">{{kqcount}}</p>
        <p class="bot f fc">出勤天数<van-icon name="arrow" class="right" /></p>
      </div>
      <div class="middleCont_middle"></div>
      <div class="middleCont_left" @click="tomycount">
        <p class="top">{{ count }}</p>
        <p class="bot f fc">发布动态<van-icon name="arrow" class="right" /></p>
      </div>
    </div>
    <div class="lineH">
      <!-- 列表 -->
      <div class="dynmicList" v-for="(item, index) in list" :key="index">
        <div class="f fb imgdiv">
          <template v-if="item.Pictures != null">
            <img
              v-for="(item1, index) in spli1(item.Pictures)"
              :key="index"
              :src="baseURL + item1"
              alt=""
              class="listimg fl"
              @click="getPathImg(index, item.Pictures)"
          /></template>

          <img v-else :src="noimg" alt="" class="listimg fl" />
          <!-- <img src="./imgs/weixin.png" alt="" class="listimg fl" /> -->
        </div>
        <div class="renz">{{ item.TypeName }}</div>
        <div class="listItem">时间：{{ item.AuthTime }}</div>
        <div class="listItem">施工员：{{ item.Authenticator }}</div>
        <div class="listItem">{{ item.TaskName }}</div>
      </div>
    </div>
  </div>
</template>
<script>

const baseURL =config.URL; // 正式服地址
import { GetProgressAuthenticationAPP } from "@/api/api";
import { ImagePreview } from "vant";
export default {
  data() {
    return {
      params: {
        projectId: localStorage.getItem("projectid"),
        userId: Number(localStorage.getItem("userId")),
        isSelf: false,
      },
      loginUserInfo: JSON.parse(localStorage.getItem("loginUserInfo"))
        .loginUserInfo,
      list: [],
      baseURL,
      count: 0,
      noimg: require("./imgs/nodat.png"),
      kqcount:0
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    spli1(date) {
      if (date != null) {
        return date.split(",");
      }
    },
    tomycount() {
      this.params.isSelf = !this.params.isSelf;
      this.init();
    },
    // 返回按钮
    onClickRight() {
      this.$router.push({ path: "/dynamicSet" ,query:{kqcount:this.kqcount,count:this.count}});
    },
    init() {
       this.$toast.loading({
        mask: true,
        message: "加载中...",
        className: "my-toast",
      });
      this.Request(GetProgressAuthenticationAPP(this.params)).then((res) => {
        if (res.StatusCode == "200") {
            this.$toast.clear();
          this.list = res.Result.list;
          this.count = res.Count;
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true",
          });
        }
      });
    },
    getPathImg(index, item) {
      // 仅看点击的动态 的几个图片
      var images = [];
      let startPosition = index;
      var arr = this.spli1(item);
      arr.forEach((i, index) => {
        var img = baseURL + i;
        images.push(img);
      });
      ImagePreview({
        images,
        startPosition,
        onClose() {
          // do something
        },
      });
    },
  },
};
</script>
<style lang="stylus" scoped>
@import './common/common';
@import '~@/assets/css/resetVant.css';
.dynmicList {
  width: 90%;
  background: #FFFFFF;
  box-shadow: 0px 14px 16px 0px rgba(43, 102, 253, 0.07);
  border-radius: 5px;
  margin: 0 auto 30px;
  padding: 30px 0 30px 30px;
  box-sizing: border-box;
  position: relative;

  .renz {
    padding: 12px;
    width: 112px;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    color: #FFFFFF;
    background: #2B9D46;
    position: absolute;
    right: 0;
    top: 230px;
  }

  .imgdiv {
    width: 100%;
    height: 243px;
    overflow-x: auto;
    margin-bottom: 25px;

    .listimg {
      min-width: 310px;
      height: 100%;
      margin-right: 20px;
    }
  }

  .listItem {
    font-size: 28px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    color: #282828;
    margin-bottom: 25px;
  }
}
</style>